在 HTML 中添加多个单选按钮组

在本文中，我们将介绍一种在 HTML 中以一个表单添加多组单选按钮的方法。

在 HTML 中使用单选按钮时，有时你可能需要在一个表单中使用多组单选按钮。在这种情况下，选择一个组的单选按钮可能会取消选择另一个组的单选按钮。

为了消除这个问题，两个组的按钮元素中的 name 属性的值必须不同。这意味着对于第一组单选按钮，我们应该对所有单选按钮的 name 属性使用相同的值。

对于第二组，name 属性的值应与第一组不同，但第二组中的所有单选按钮应具有相同的值。

我们还可以使用 fieldset 元素在视觉上分隔两个组。 标签对 HTML 中的相关元素进行分组。

在下面的示例中，我们将创建两组单选按钮。在第一组中，用户将能够选择摩托车，在第二组中，他们将能够选择汽车。

例如，使用 标签创建一个表单。然后，为摩托车单选按钮组使用 标签。

为 Honda 创建一个单选按钮并为 name 属性设置值 motorcycle。接下来，为 Yamaha 创建另一个单选按钮，并再次将 name 属性的值设置为 motorcycle。

关闭 标记后，为汽车单选按钮创建另一个 fieldset 元素。在车上，为现代和丰田创建单选按钮。

将两个按钮的 name 属性值设置为 car。代码示例如下所示。

因此，我们可以从两组单选按钮中选择每辆摩托车和汽车。fieldset 元素在每个组周围创建一个边框。

这样，我们可以在 HTML 中的一个表单中添加两组单选按钮。

上一篇：在 HTML 中编写摄氏度符号

下一篇：在 HTML 中添加悬停文本

发布时间：2023/03/23 浏览次数：169 分类：HTML

本教程演示了如何制作一个充当链接的 HTML 按钮

发布时间：2023/03/23 浏览次数：102 分类：HTML

本文介绍如何在两个并排的 HTML 按钮之间增加空间。

发布时间：2023/03/23 浏览次数：78 分类：HTML

本教程介绍如何在 HTML 中打印特定页面。

发布时间：2023/03/23 浏览次数：123 分类：HTML

本教程介绍了为电话号码创建超链接以及使用 HTML 从移动设备呼叫电话号码的方法。

发布时间：2023/03/23 浏览次数：73 分类：HTML

本教程介绍如何在 HTML 中写撇号。

发布时间：2023/03/23 浏览次数：112 分类：HTML

本教程介绍了字符转义以及 HTML 中要转义的字符。

发布时间：2023/03/23 浏览次数：97 分类：JavaScript

本教程介绍如何设置在网页中央打开一个弹出窗口。

发布时间：2023/03/23 浏览次数：152 分类：HTML

本教程介绍如何在 HTML 中创建垂直线。

发布时间：2023/03/23 浏览次数：179 分类：HTML

本教程介绍如何在 HTML 中跳过一行。

转载请发邮件至 [email protected] 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：